<template>
	<view class="page">
		<view class="jui_h30"></view>
		<view class="" @tap="back">
			<image src="../../static/imgs/back1.png" mode="" style="height: 30upx;width: 20upx;"></image>
		</view>
		<view class="tit">手机号注册</view>
		<view class="content">
			<view class="list">
				<input type="number" placeholder="请输入手机号码" v-model="info.phone" />
			</view>
			<view class="list">
				<input type="text" placeholder="请输入验证码" v-model="info.verifycode" />
				<button class="yzm_btn" :disabled="codeDisabled" @click="getCode">{{ codeMsg }}</button>
				<!-- <img :src="imgUrl" style="width:255rpx; height:88rpx" /> -->
			</view>
			<view class="list">
				<input :type="iptType[0].type" placeholder="请输入6位数登录密码" class="ipt" v-model="info.password" />
				<image :src="iptType[0].viewno ? imgSrc : noView" @click="changeType(0)"></image>
			</view>
			<view class="list">
				<input :type="iptType[1].type" placeholder="请再次输入6位数登录密码" class="ipt" v-model="info.repassword" />
				<image :src="iptType[1].viewno ? imgSrc : noView" @click="changeType(1)"></image>
			</view>
			<view class="list">
				<input :type="iptType[2].type" placeholder="请输入6位纯数字支付密码" class="ipt" v-model="info.paypass" />
				<image :src="iptType[2].viewno ? imgSrc : noView" @click="changeType(2)"></image>
			</view>
			<view class="list">
				<input :type="iptType[3].type" placeholder="请再次输入6位纯数字支付密码" class="ipt" v-model="info.repaypass" />
				<image :src="iptType[3].viewno ? imgSrc : noView" @click="changeType(3)"></image>
			</view>
			<view class="list">
				<input type="text" placeholder="请输入邀请码" :disabled="disabled" v-model="info.invitcode" />
			</view>
			<!-- <view class="list">
				<view class="jui_fs32 jui_text_left" style="width:100%;color:#e0e0e0" v-if="!info.province"  @tap="chooseCity">请选择您所在地址的省、市、区</view>
				<input class="jui_fc_333" disabled type="text" placeholder="请选择您所在地址的省、市、区" v-model="region.label" @tap="chooseCity" v-else />
			</view> -->
			<view class="bot jui_flex jui_flex_items_center" @tap="check">
				<view style="width:146rpx">
					<evan-checkbox :icon-size="15" primary-color="#318BF2" v-model="checked">同意</evan-checkbox>
				</view>
				<view><text @tap="jump(`/pages/login/xieyi`)" class="jui_fc_zhuse">《使用条款》</text></view>
			</view>
			<view class="jui_h60"></view>
			<view class=""><view @tap="register" class="login jui_bor_rad_40 pad jui_text_center   jui_fc_fff  jui_fs32">注册</view></view>
			<view style="margin-top: 40rpx;"><view @tap="download('android')" class="login jui_bor_rad_40 pad jui_text_center jui_fc_fff  jui_fs32">下载APP</view></view>
			<view class="jui_h60"></view>
		</view>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValue" @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
const util = require('../../tool/util');
export default {
	components: {
		mpvueCityPicker
	},
	data() {
		return {
			iptType:[{type:'password', viewno:true},{type:'password', viewno:true},{type:'password', viewno:true},{type:'password', viewno:true}],
			imgSrc: require('@/static/imgs/home/view_no.png'),
			imgUrl:'',
			noView: require('@/static/imgs/home/view.png'),
			cityPickerValue: [0, 0, 1],
			themeColor: '#007AFF',
			region: {
				label: '请选择您所在地址的省、市、区2',
				value: [],
				cityCode: ''
			},
			code:"",
			codeMsg: '获取验证码',
			countdown: 60,
			codeDisabled: false,
			timer: null,
			info:{
				province:'',
				city:'',
				district:''
			},
			pwd_again:'',
			pwd_two_again:'',
			checked:false,
			disabled:false,
			android:'',
			ios:''
		};
	},
	onLoad(opt) {
		this.info.invitcode = opt.inviteCode || '';
		const _token = uni.getStorageSync('token');
		let params ={
			_token: _token,
			type:15
		}
		if(opt.inviteCode){
			this.disabled = true;
		}
		this.$api.getConfigImg(params).then(res => {
			if(res.ok){
				this.android = res.data[0].pathurl;
				this.ios = res.data[1].pathurl;
			}
		});
	},
	methods: {    
		back() {
			uni.navigateTo({
				url: 'login'
			});
		},
		getCode() {
			if (!this.info.phone) {
				return this.$msg('请输入手机号码');
			}
			this.$api.setCode({ phone: this.info.phone }).then(res => {
				if(res.ok){
					this.$msg(res.data,2000);
					this.codeDisabled = true;
					if (!this.timer) {
						this.timer = setInterval(() => {
							if (this.countdown > 0 && this.countdown <= 60) {
								this.countdown--;
								if (this.countdown !== 0) {
									this.codeDisabled = true;
									this.codeMsg = '重新发送(' + this.countdown + ')';
								} else {
									clearInterval(this.timer);
									this.codeMsg = '获取验证码';
									this.countdown = 60;
									this.timer = null;
									this.codeDisabled = false;
								}
							}
						}, 1000);
					}
				}else{
					this.$msg(res.data,2000);
					this.codeDisabled = false;
				}
			})
		},
		onCancel(e) {
			console.log(e);
		},
		chooseCity() {
			this.$refs.mpvueCityPicker.show();
		},
		onConfirm(e) {
			this.region = e;
			this.cityPickerValue = e.value;
			var arr = e.label.split("-");
			this.info.province = arr[0];
			this.info.city = arr[1];
			this.info.district = arr[2];
		},
		check() {
			this.i++;
			if (this.i % 2) {
				this.pic = '../../static/img/checked.png';
			} else {
				this.pic = '../../static/img/check.png';
			}
		},
		changeType(index) {
			if (this.iptType[index].type == 'text') {
				this.iptType[index].type = 'password';
				this.iptType[index].viewno = true;
			} else {
				this.iptType[index].type = 'text';
				this.iptType[index].viewno = false;
			}
		},
		register(){
				console.log('this.info',this.info)
			if(!this.info.phone){
				return this.$msg("请输入手机号码");
			}
			if(!this.info.verifycode){
				return this.$msg("请输入验证码");
			}
			if(!this.info.password){
				return this.$msg("请输入登录密码");
			}
			if(this.info.password != this.info.repassword){
				return this.$msg("两次登录密码输入不一致");
			}
			if(!this.info.paypass){
				return this.$msg("请输入支付密码");
			}
			if(this.info.paypass != this.info.repaypass){
				return this.$msg("两次支付密码输入不一致");
			}
			if(!this.info.invitcode){
				return this.$msg("请输入邀请码");
			}
			// if(!this.info.province){
			// 	return this.$msg("请选择您所在地址的省、市、区");
			// }
			if(!this.checked){
				return this.$msg("请勾选使用条款");
			}
		
			this.$api.register(this.info).then(res => {
				if(res.ok){
					this.$msg(res.msg);
					if(this.disabled){
						
					}else{
						setTimeout(()=>{
							uni.navigateTo({
								url:`/pages/login/login`
							})
						}, 800)
					}
				}else{
					this.$msg(res.msg);
				}
			})
		},
		download(clientType){
			if(clientType&&clientType=='android'){
				//#ifdef H5
				window.location.href = this.android;
				//#endif
				//#ifdef APP-PLUS
				plus.runtime.openURL(this.android);
				//#endif
			}else{
				//#ifdef H5
				window.location.href = this.ios;
				//#endif
				//#ifdef APP-PLUS
				plus.runtime.openURL(this.ios);
				//#endif
			}
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #ffffff;
}

.page {
	padding: 0 30upx;
	overflow: hidden;
}

.tit {
	font-size: 50upx;
	color: #383630;
	margin-top: 30upx;
	font-weight: 600;
}

.content {
	margin-top: 40upx;
	// padding: 0 30upx;

	.list {
		width: 100%;
		height: 100upx;
		border-bottom: 1upx solid #dedede;
		font-size: 40upx;
		margin-bottom: 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.ipt {
			border: none;
			outline: none;
			font-size: 32upx;
		}

		.input-placeholder {
			color: #dbdcdf;
			font-size: 32upx;
		}

		input {
			height: 100%;
			font-size: 32upx !important;
			color: #333;
			flex: 1;
		}

		image {
			width: 44upx;
			height: 44upx;
		}

		view {
			width: 180upx;
			height: 66upx;
			color: #46c46d;
			font-size: 28upx;
			// background: $theme-color;
			border-radius: 50upx;
			text-align: center;
			line-height: 66upx;
		}
	}

	.bot {
		margin-top: 20upx;
		display: flex;
		align-items: center;
		font-size: 26upx;
		color: #333;

		text {
			color: #0091ff;
		}

		image {
			width: 28upx;
			height: 28upx;
			margin-right: 16upx;
		}
	}

	.btn {
		width: 70%;
		height: 80upx;
		font-size: 32upx;
		text-align: center;
		line-height: 80upx;
		color: #fff;
		// background: $theme-color;
		margin: 60upx auto;
		border-radius: 50upx;
	}
}

::-webkit-input-placeholder {
	color: #dbdcdf;
	font-size: 32rpx;
}

.border {
	height: 28rpx;
	width: 28rpx;
	border-radius: 50%;
}

.login {
	background-color: $zhuse;
}

.pad {
	padding: 20rpx 0;
}
</style>
